<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${contextPath!}/static/lib/codemirror/codemirror.css">
    <link rel="stylesheet" href="${contextPath!}/static/lib/codemirror/theme/darcula.css">
    <#include "common/lib.html">
    <script src="${contextPath!}/static/lib/codemirror/codemirror.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/javascript.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/htmlmixed.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/vue.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/css.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/yaml.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/xml.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/clike.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/mode/textile.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/addon/mode/overlay.js"></script>
    <script src="${contextPath!}/static/lib/codemirror/addon/selection/active-line.js"></script>
    <script type="module" src="${contextPath!}/static/js/template.js"></script>
    <title>模板配置</title>
</head>
<style>
    #app {
        padding: 40px;
    }

    .card {
        margin-bottom: 10px;
    }
</style>
<body>
<div id="app">
    <a-row style="margin-bottom: 40px">
        <a-col span="8" offset="4">
            名称:<a-input @change="queryModules" v-model:value="moduleSearchModel.moduleName" style="width:190px"></a-input>
            分组:<a-input @change="queryModules" v-model:value="moduleSearchModel.group" style="width:190px" ></a-input>
            <a-button type="primary" @click="openModuleForm()">新增</a-button>
        </a-col>
        <a-col span="8">
            名称过滤:<a-input style="width:300px" @change="templateQuery" v-model:value="templateSearchModel.name"></a-input>
            <a-button type="primary"  @click="openTemplateForm()">新增</a-button>
        </a-col>
    </a-row>
    <a-row :gutter="10">
        <a-col offset="4" span="8">
            <a-row :gutter="[10,10]">
                <a-col v-for="module in modules" span="12">
                    <a-card hoverable  style="width: 280px">
                        <template #title>
                            <h3 style="color: #108ee9">{{module.moduleName}} </h3>
                        </template>
                        <p><span style="color:firebrick;font-size: 18px">分组:{{module.group}}</span>    </p>
                        <a-tag color="#108ee9" style="margin-top: 3px" v-for="tag in module.templates">{{tag}}</a-tag>
                        <template #actions>
                            <a-button type="text" style="color: #108ee9" @click="openModuleForm(module)">UPDATE</a-button>
                            <a-button type="text" danger @click="removeModules(module)">DELETE</a-button>
                        </template>
                    </a-card>
                </a-col>
            </a-row>

        </a-col>
        <a-col span="8">
            <a-card class="card" v-for="template in templates">
                <template #title>
                    <h3 style="color: #108ee9">模板:{{template.name}}</h3>
                </template>
                <template #extra>
                    <a-button style="color: #108ee9;font-size: 16px" type="text" @click="openTemplateForm(template)">UPDATE</a-button>
                    <a-button style="font-size: 16px" danger type="text"  @click="removeTemplate(template)">DELETE</a-button>
                </template>
                <p>文件名生成规则:&nbsp;&nbsp;&nbsp;<span style="font-size: 20px;color:#f50">{{template.nameExpression}}</span></p>
                <p>文件类型:&nbsp;&nbsp;&nbsp;<span style="font-size: 20px;color:#f50">{{template.type}}</span> </p>
            </a-card>
        </a-col>
    </a-row>

    <!----添加修改模块--->
    <a-modal footer="" title="模块" v-model:visible="moduleVisible" width="30%">
        <div style="padding: 20px">
            <a-form :model="moduleFormModel" ref="moduleFormRef">
                <a-form-item :rules="[{required:true,message:'必填'}]" label="模块" name="moduleName">
                    <a-input v-model:value="moduleFormModel.moduleName"></a-input>
                </a-form-item>
                <a-form-item :rules="[{required:true,message:'必填'}]" label="分组" name="group">
                    <a-input v-model:value="moduleFormModel.group"></a-input>
                </a-form-item>
                <a-form-item :rules="[{required:true,message:'必选'}]" label="模板" name="templates">
                   <a-select mode="multiple" v-model:value="moduleFormModel.templates">
                        <a-select-option v-for="template in selectTemplates" :value="template.name">{{template.name}}</a-select-option>
                   </a-select>
                </a-form-item>
                <a-form-item label="aaa">
                    {{fileTypes}}
                </a-form-item>
                <a-form-item >
                    <a-button @click="saveOrUpdateModule" type="primary">提交</a-button>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
    <!--添加修改模板-->
    <a-modal :mask-closable="false" footer="" v-model:visible="templateVisible" title="模板" width="100%">
        <div style="padding: 20px">
            <a-form ref="templateFormRef" layout="vertical" :model="templateFormModel" :labelCol="{span:4}">
                <a-row>
                    <a-col span="6">
                        <a-form-item  label="模板" name="name">
                            <a-input :disabled="templateFormModel.disabled" v-model:value="templateFormModel.name"/>
                        </a-form-item>
                        <a-form-item  label="生成文件名称规则" name="nameExpression">
                            <a-input :disabled="templateFormModel.disabled" v-model:value="templateFormModel.nameExpression"/>
                        </a-form-item>
                        <a-form-item  label="文件类型" name="type">
                            <a-auto-complete
                                    :disabled="templateFormModel.disabled"
                                    v-model:value="templateFormModel.type"
                                    :options="fileTypes"
                                    style="width: 200px">
                            </a-auto-complete>
                        </a-form-item>
                        <a-form-item>
                            <a-button @click="saveOrUpdateTemplate">提交</a-button>
                        </a-form-item>

                    </a-col>
                    <a-col span="18">
                        <a-form-item label="template">
                            <textarea   id="code" name="code"></textarea>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </a-modal>
</div>


</body>
</html>